<template>
  <div class="user">
    <div class="top">
      <div class="box"><div class="box_img"></div></div>
      <p class="aaaa">{{ resume }}</p>
      <div class="h_box">
        <div class="box_l">
          <span>姓名</span>
          <p>{{ myname }}</p>
        </div>
        <div class="box_l">
          <span>联系方式</span>
          <p>{{ phone }}</p>
        </div>
      </div>
    </div>
    <div class="content" @click="clickfn">
      <div class="cbox_l">
        <img src="../assets/切图/Personal information.png" />
        <span>个人信息</span>
      </div>
      <div class="cbox_r">
        <img src="../assets/图标/jiantou.png" alt="" />
      </div>
    </div>
    <div class="content">
      <div class="cbox_l">
        <img src="../assets/切图/形状 2.png" />
        <span>支付中心</span>
      </div>
      <div class="cbox_r">
        <img src="../assets/图标/jiantou.png" alt="" />
      </div>
    </div>
    <div class="content">
      <div class="cbox_l">
        <img src="../assets/切图/change Password.png" />
        <span>修改密码</span>
      </div>
      <div class="cbox_r">
        <img src="../assets/图标/jiantou.png" alt="" />
      </div>
    </div>
    <div class="content" @click="banben">
      <div class="cbox_l">
        <img src="../assets/切图/Personal information.png" />
        <span>版本信息</span>
      </div>
      <div class="cbox_r">
        <span>版本1.0</span>
        <img src="../assets/图标/jiantou.png" alt="" />
      </div>
    </div>
    <div class="content">
      <div class="cbox_l">
        <img src="../assets/切图/组 16.png" />
        <span>清除缓存</span>
      </div>
      <div class="cbox_r">
        <img src="../assets/图标/jiantou.png" alt="" />
      </div>
    </div>
    <div class="btnaaa" @click="tuichu">退出登录</div>
    <van-tabbar v-model="active">
      <van-tabbar-item
        icon="wap-home
"
        @click="index1"
        >系统功能</van-tabbar-item
      >
      <van-tabbar-item icon="chat">联系</van-tabbar-item>
      <van-tabbar-item icon="manager">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
 
<script>
import Vue from "vue";
import { Dialog, Toast } from "vant";

Vue.use(Toast);
// 全局注册
Vue.use(Dialog);
import { GetPUsweList } from "../request/aip";
export default {
  data() {
    return {
      resume: "",
      myname: "",
      phone: "",
      active: 2,
    };
  },
  created() {
    GetPUsweList().then((res) => {
      // console.log(res);
      this.resume = res.data.remark || "个人简历";
      this.myname = res.data.nickName || "老王";
      this.phone = res.data.phone || "13888888888";
    });
  },
  updated() {
    if (this.active == 1) {
      this.$router.push("/letter");
    }
  },
  methods: {
    // 个人详情
    clickfn() {
      this.$router.push("/userlist");
    },
    // 版本详情
    banben() {
      this.$router.push("/banben");
    },
    // 退出登录
    tuichu() {
      Dialog.confirm({
        title: "是否退出登录",
      })
        .then(() => {
          // console.log(123);
          // on confirm
          setTimeout(() => {
            localStorage.removeItem("x-auth-token");
            this.$router.push({ name: "Home" });
          }, 500);
        })
        .catch(() => {
          // on cancel
        });
    },
    index1() {
      this.$router.push("/index");
    },
  },
};
</script>
 
<style lang = "less" scoped>
.user {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
  background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.17qq.com%2Fuploads%2Fuaurtrceax.jpeg&refer=http%3A%2F%2Fpic.17qq.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621932021&t=0c82e614c5eeb7761ca8232866c7687d")
    no-repeat center top;
  background-size: 100% 20%;
  .top {
    width: 90vw;
    min-height: 20px;
    background-color: #fff;
    margin: 10vh auto 0;
    overflow: hidden;
    padding: 10px;
    .box {
      position: absolute;
      .box_img {
        border-radius: 50%;
        width: 100px;
        height: 100px;
        background: url("../assets/我的客户.png") no-repeat center bottom;
        background-color: #d6e3ec;
        position: relative;
        top: -50px;
        left: 120px;
      }
    }
    .aaaa {
      text-align: center;
      margin-top: 60px;
      color: #6d6d6d;
      padding: 10px;
      border-bottom: 1px solid #ece4e4;
    }
    .h_box {
      display: flex;
      align-items: center;
      padding: 10px 0;
      align-items: center;

      .box_l {
        flex: 1;
        display: flex;
        align-items: center;
        span {
          color: #ccc;
          margin-right: 5px;
          font-size: 15px;
        }
        p {
          font-size: 15px;
        }
      }
    }
  }
  .content {
    width: 90vw;
    min-height: 20px;
    background-color: #fff;
    margin: auto;
    overflow: hidden;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgb(248, 233, 233);
    .cbox_l {
      display: flex;
      align-items: center;

      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }
    .cbox_r {
      span {
        color: rgb(218, 216, 216);
        margin-right: 10px;
      }
      img {
        width: 5px;
        height: 10px;
      }
    }
  }
  .btnaaa {
    width: 90vw;
    margin: 10vh auto 0;
    text-align: center;
    background-color: #e9e9e9;
    padding: 10px 0;
    border-radius: 5px;
  }
}
</style>